<template>
  <div class="flex flex-items-center pl-20rpx">
    <span class="title">书架</span>
    <div class="search" @click="handleClick">
      <i class="i-carbon:search"></i>
      <span>搜索</span>
    </div>
  </div>
  <div class="flex flex-items-center wrapper px-40rpx">
    <span class="title">书架</span>
    <div class="search" @click="handleClick">
      <i class="i-carbon:search"></i>
      <span>搜索</span>
    </div>
  </div>
  <div class="index-wrapper">
    <div class="mt-2 h-auto">
      <div class="book-wrapper">
        <div
          class="book-item"
          v-for="(item, index) in booklist.List"
          :key="index"
          @click="handleSeeClick(item)"
        >
          <img class="book-item-img" :src="item.picture" alt="" />
          <div class="mt-5rpx">
            <p class="font-size-36rpx overfloe">{{ item.name }}</p>
            <p class="font-size-34\0rpx color-#A8A8A8 overfloe mt-5rpx">
              {{ item?.author }}
            </p>
          </div>
        </div>
        <div class="flex-center-add">
          <i class="i-carbon-add-large"></i>
          <span>更多小说</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
import useBooksStore from "@/store/modules/books";
const useBooks = useBooksStore();
const booklist = reactive({
  List: [],
});
// 查看详情
const handleSeeClick = (item: unknown) => {
  console.log(item, "item");
  useBooks.setBooksDetail(item);
  uni.navigateTo({
    url: `/pages/bookRead/bookRead?id=${item?.Chapterid}&bookid=${item?.id}`,
  });
};
const handleClick = () => {
  uni.navigateTo({
    url: "/pages/search/search",
  });
};
onMounted(() => {
  console.log("onMounted");
});
onShow(() => {
  // booklist.List = uni.getStorageSync("Bookcase");
  const list = uni.getStorageSync("Bookcase") || "[]";
  booklist.List = JSON.parse(list);
  console.log(booklist.List, "booklist.List");
});
</script>

<style lang="scss" scoped>
.index-wrapper {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 0 32rpx;
  overflow: hidden;
}

.flex-center-add {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 268rpx;
  border: 2rpx solid #a8a8a8;
}

.overfloe {
  width: 100%;
  height: 40px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.book-item-img {
  display: block;
  width: 100%;
  height: 268rpx;
  border-radius: 20rpx;
}

.book-item {
  height: auto;
  width: 100%;
  overflow: hidden;
  border-radius: 20rpx;
}

.book-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 30rpx;
}

.search {
  display: flex;
  padding: 0 20rpx;
  margin-left: 20rpx;
  align-items: center;
  width: 200rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background-color: rgb(148, 241, 241);
  color: #999;
  font-size: 24rpx;

  i {
    margin-right: 10rpx;
  }
}
</style>
